package myJs.cps

import cats.effect.SyncIO
import japgolly.scalajs.react.ReactMonocle._
import japgolly.scalajs.react._
import japgolly.scalajs.react.component.Scala.BackendScope
import japgolly.scalajs.react.extra.StateSnapshot
import japgolly.scalajs.react.vdom.all._
import monocle.Lens
import monocle.macros.Lenses
import myJs.myPkg.Hooks._
import myJs.tool.Tool
import myJs.tool.Tool._

import scala.collection.immutable.SeqMap
import japgolly.scalajs.react.util.EffectCatsEffect._

/** Created by yz on 3/11/2020
  */
object FontFamilyCp {

  case class Props(
      fontFamily: String = "Times"
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val (fontFamily, setFontFamily) = useState("Times")

    val fontFamilyMap = SeqMap(
      "Times" -> "Times New Roman（serif）",
      "ArialMT" -> "Arial（sans）",
      "mono" -> "Courier（mono）",
      "SimSun" -> "宋体（SimSun）"
    )

    useEffect(
      {
        setFontFamily(props.fontFamily)
      },
      List(props.fontFamily)
    )

    div(
      `class` := "form-group",
      label(`class` := "control-label col-sm-4", messages("font"), ":"),
      div(
        `class` := "col-sm-8",
        PureSelectCp
          .Props(value = fontFamily, name = "fontFamily", optionMap = fontFamilyMap, onChange = setFontFamily.toSyncIO)
          .render
      )
    )

  }

}
